$item-img-size: 240px !default;

.page-group-list {
  height: calc(100vh - 92px);
   /*  #ifdef  h5  */
   padding-top: $navigate-height-h5;
   /*  #endif  */
 
  .groups-list__scroll {
    box-sizing: border-box;
    @include page-scroll($tabbar-height + $edge-size/2, 0);
  }
  &.has-navbar {
    .groups-list__scroll {
      @include page-scroll(
        $tabbar-height + $edge-size/2 + $navigate-height-h5,
        0
      );
    }
  }
  .group-item {
    $self: &;
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: $cart-border-radius;
    overflow: hidden;
    margin: 0 $edge-size $edge-size;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);

    &__hd {
      text-align: center;
    }
    &__bd {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: $edge-margin;
      flex: 1;
    }
    &__cont {
      flex: 1;
    }
    &__img {
      width: $item-img-size;
      height: $item-img-size;
      display: block;
    }
    &__title {
      @include multi-ellipsis(2);
      line-height: 1.4;
      color: #111;
      margin: 0 0 16px;
      &-status {
        color: $color-red;
        font-weight: bold;
      }
    }
    &__desc {
      line-height: 1.4;
      color: $color-gray;
      font-size: $font-size-small;
      display: flex;
      align-items: center;
    }
    &__tuan {
      display: inline-block;
      height: 36px;
      line-height: 36px;
      overflow: hidden;
      padding-right: 10px;
      margin-right: 20px;
      box-shadow: 0 0 0 1px #ff4856;
      border-radius: 5px;
      font-size: 24px;
      color: #ff4856;

      &-num {
        display: inline-block;
        height: 36px;
        line-height: 36px;
        padding: 0 10px;
        margin-right: 10px;
        background: #ff4856;
        color: #fff;
        font-weight: bold;
      }
      &-txt {
        display: inline-block;
        height: 36px;
        line-height: 36px;
      }
    }
    &__price {
      font-size: floor(1.2 * $font-size);
      color: $color-red;
    }
    &__action {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .timer {
        display: flex;
        align-items: center;
        color: $color-gray;
        .at-countdown__time-box {
          font-family: "Helvetica";
        }
      }
      .at-icon {
        color: $color-gray;
        vertical-align: middle;
        margin-right: 6px;
      }
    }
    .at-countdown {
      color: $color-gray;
      line-height: 1;
      vertical-align: middle;
      display: inline-block;
      font-size: 24px;
    }
    .at-countdown__time-box {
      color: $color-gray;
      font-size: 24px;
    }
    .at-countdown__separator {
      padding: 0 3px;
    }
    .btn-go {
      width: 120px;
      height: 48px;
      line-height: 48px;
      background: $color-brand-primary;
      border: none;
      border-radius: 30px 30px 30px 0;
      color: #fff;
      text-align: center;
      font-size: $font-size-small;
      font: $font-family;
      &.disabled {
        opacity: 0.3;
      }
    }
  }
}
